<template>
  <div>
    <el-select v-model="name" placeholder="请选择编程语言">
      <el-option
        v-for="item in languages"
        :key="item"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>
    <codemirror
      style="border: 1px solid darkgrey"
      v-model="code"
      :options="options"
    >
    </codemirror>
    <el-button  type="primary" @click="handleBtn">提交</el-button>
  </div>
</template>
<script>
import {codemirror} from 'vue-codemirror-lite'
import 'codemirror/theme/ambiance-mobile.css'
export default {
  name: 'CodeMirror',
  components: {
    codemirror
  },
  props: ['languages'],
  data () {
    return {
      code: '',
      options: {
        tabSize: 2,
        theme: 'ambiance-mobile',
        lineNumbers: true,
        line: true,
        mode: 'text/x-c++',
        foldGutter: true,
        matchBrackets: true
      },
      allLanguage: {},
      name: '',
      submit: {}
    }
  },
  mounted () {
    this.name = this.languages[0]
  },
  methods: {
    handleBtn () {
      this.submit = {
        language: this.name,
        code: this.code
      }
      console.log(this.submit)
    }
  }
}
</script >
<style lang="less" scoped>
.el-button{
  margin-left: 45%;
  margin-top: 20px;
}
.el-select{
  margin: 20px 0;
}
</style>
